<template>
	<view>
		<view v-if="loadingComplete">
			<view class="article-container">
				<!-- 文章头部 -->
				<view class="article-header">
					<view class="article-title">{{ articleInfo.title }}</view>
					<view class="article-meta">
						<view class="meta-item official">
							<text>官方</text>
						</view>
						<view class="meta-item">
							<text>{{ articleInfo.create_time }}</text>
						</view>
						<view class="meta-item">
							<text>{{ articleInfo.views }}次阅读</text>
						</view>
					</view>
				</view>
				
				<!-- 文章内容 -->
				<view class="article-content">
					<rich-text :nodes="articleInfo.content"></rich-text>
				</view>
			</view>
			
			<!-- 错误提示 -->
			<view v-if="errorInfo.show" class="error-container">
				<view class="error-content">
					<text class="error-text">{{ errorInfo.message }}</text>
					<view class="retry-btn" @click="retryLoad">重新加载</view>
				</view>
			</view>
		</view>
		
		<!-- 骨架屏 -->
		<article-skeleton v-else />
	</view>
</template>

<script>
	import articleSkeleton from '@/components/skeleton/article.vue'
	export default {
		components: {
			articleSkeleton
		},
		data() {
			return {
				id: 0,
				articleInfo: {},
				loadingComplete: false,
				errorInfo: {
					show: false,
					message: ''
				}
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getArticleInfo()
		},
		methods: {
			// 获取文章信息
			async getArticleInfo(showLoading = true) {
				if (showLoading) {
					this.loadingComplete = false
					this.errorInfo.show = false
				}
				
				try {
					let res = await this.$api.common.getArticleInfo.get({id: this.id})
					
					if (res.code === 0) {
						this.articleInfo = res.data || {}
						
						uni.setNavigationBarTitle({
							title: this.articleInfo.title || '文章详情'
						});
						
						this.loadingComplete = true
					} else {
						throw new Error(res.msg || '获取文章信息失败')
					}
				} catch (error) {
					console.error('获取文章信息失败:', error)
					this.errorInfo = {
						show: true,
						message: error.message || '网络异常，请稍后重试'
					}
					this.loadingComplete = true
				}
			},
			
			// 重新加载
			retryLoad() {
				this.getArticleInfo()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
		padding-bottom: 120upx;
	}

	.article-container {
		background: #fff;
		margin: 20upx;
		border-radius: 16upx;
		overflow: hidden;
		transition: all 0.3s ease;
	}

	.article-header {
		padding: 40upx 30upx 30upx;
		border-bottom: 1px solid #f0f0f0;
	}

	.article-title {
		font-size: 40upx;
		color: #303133;
		font-weight: 600;
		line-height: 1.4;
		margin-bottom: 24upx;
		word-break: break-word;
	}

	.article-meta {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.meta-item {
		display: flex;
		align-items: center;
		font-size: 24upx;
		color: #909399;
		margin-right: 30upx;
		margin-bottom: 10upx;
		transition: color 0.3s ease;

		&.official {
			background: linear-gradient(135deg, #ff6b6b, #e93323);
			color: #fff;
			padding: 6upx 16upx;
			border-radius: 20upx;
			font-weight: 500;
		}

		.iconfont {
			margin-right: 8upx;
			font-size: 28upx;
		}
	}

	.article-content {
		padding: 30upx;
		font-size: 32upx;
		color: #606266;
		line-height: 1.8;
		word-break: break-word;

		/* 富文本内容样式优化 */
		::v-deep img {
			max-width: 100%;
			height: auto;
			border-radius: 8upx;
			margin: 20upx 0;
		}

		::v-deep p {
			margin-bottom: 20upx;
			text-indent: 2em;
		}

		::v-deep h1, ::v-deep h2, ::v-deep h3, ::v-deep h4, ::v-deep h5, ::v-deep h6 {
			margin: 30upx 0 20upx;
			font-weight: 600;
			color: #303133;
		}

		::v-deep h1 {
			font-size: 40upx;
		}

		::v-deep h2 {
			font-size: 36upx;
		}

		::v-deep h3 {
			font-size: 34upx;
		}

		::v-deep ul, ::v-deep ol {
			padding-left: 40upx;
			margin-bottom: 20upx;
		}

		::v-deep li {
			margin-bottom: 10upx;
		}

		::v-deep blockquote {
			border-left: 4upx solid #e93323;
			padding-left: 20upx;
			margin: 20upx 0;
			color: #909399;
			background-color: #f8f8f8;
			padding: 20upx;
			border-radius: 0 8upx 8upx 0;
		}

		::v-deep code {
			background-color: #f5f5f5;
			padding: 4upx 8upx;
			border-radius: 4upx;
			font-family: monospace;
			font-size: 28upx;
		}

		::v-deep pre {
			background-color: #f5f5f5;
			padding: 20upx;
			border-radius: 8upx;
			overflow-x: auto;
			margin: 20upx 0;
		}

		::v-deep a {
			color: #e93323;
			text-decoration: underline;
		}
	}


	/* 错误提示样式 */
	.error-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 60vh;
		padding: 0 30upx;
	}

	.error-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60upx 40upx;
		background-color: #fff;
		border-radius: 16upx;
		box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);

		.iconfont {
			font-size: 80upx;
			color: #e93323;
			margin-bottom: 30upx;
		}

		.error-text {
			font-size: 28upx;
			color: #606266;
			text-align: center;
			margin-bottom: 40upx;
			line-height: 1.5;
		}

		.retry-btn {
			padding: 20upx 60upx;
			background: linear-gradient(135deg, #ff6b6b, #e93323);
			color: #fff;
			font-size: 28upx;
			border-radius: 40upx;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
			}
		}
	}

	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.article-title {
			font-size: 36upx;
		}

		.article-content {
			font-size: 30upx;
		}
	}
</style>